<template>
  <div class="app-container">
    <div class="box-form-top">
      <div class="dialogWin">
        <div class="modelArea">
          <div class="modelArea_up">
            <div ref="cyMapTest" id="cyMap" class="cy"></div>
            <div class="cy_Area">
              <div
                style="
                  height: 10%;
                  width: 100%;
                  display: grid;
                  place-items: center;
                "
              >
                上边框： {{ extend.up }}（米）
              </div>
              <div
                style="
                  height: 80%;
                  width: 100%;
                  display: grid;
                  place-items: center;
                "
              >
                高度：{{ extend.height }}（米）
              </div>
              <div
                style="
                  width: 100%;
                  height: 10%;
                  display: grid;
                  place-items: center;
                "
              >
                下边框：{{ extend.down }}（米）
              </div>
            </div>
          </div>
          <div class="modelArea_down">
            <div
              style="
                height: 100%;
                width: 15%;
                display: grid;
                place-items: center;
              "
            >
              左边框：{{ extend.left }}（米）
            </div>
            <div
              style="
                height: 100%;
                width: 68%;
                display: grid;
                place-items: center;
              "
            >
              宽度：{{ extend.width }}（米）
            </div>
            <div
              style="
                height: 100%;
                width: 15%;
                display: grid;
                place-items: center;
              "
            >
              右边框：{{ extend.right }}（米）
            </div>
          </div>
        </div>
        <div class="rightArea">
          <div class="rightArea_Up">
            <el-form ref="searchForm" :model="searchForm" label-width="80px">
              <!-- <el-row>
                    <el-col :span="24"
                      ><el-form-item label="订单号" prop="batchnum">
                        <el-input
                          :disabled="true"
                          v-model="searchForm.batchnum"
                          placeholder="订单号"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24"
                      ><el-form-item label="卷号" prop="reelnum">
                        <el-input
                          v-model="searchForm.reelnum"
                          placeholder="卷号"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row> -->
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                      value-format="timestamp"
                      v-model="searchForm.startTime"
                      type="datetime"
                      placeholder="请选择开始时间"
                      align="right"
                      style="width: 100%"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="结束时间" prop="endTime">
                    <el-date-picker
                      value-format="timestamp"
                      v-model="searchForm.endTime"
                      type="datetime"
                      placeholder="请选择结束时间"
                      align="right"
                      style="width: 100%"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                type="primary"
                style="width: 100%"
                @click="loadMap"
                :loading="btnload"
                >加载数据</el-button
              >
            </div>
          </div>
          <div class="rightArea_Down">
            <div class="block">
              <span>瑕疵地图缩放</span>
              <el-slider
                v-model="zoomSilder"
                :show-tooltip="false"
                @change="zoomSilderChange(item)"
              ></el-slider>
            </div>
            <div>
              <div>上下移动</div>
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-caret-top"
                  style="width: 48.5%"
                  @click="mapMove(0)"
                  >上移</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-caret-bottom"
                  style="width: 48.5%"
                  @click="mapMove(0)"
                  >下移</el-button
                >
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="margin-bottom: 8px">瑕疵种类筛选</div>
              <el-checkbox-group v-model="checkboxGroup1" size="small">
                <el-checkbox
                  class="checkBoxStyle"
                  :label="item"
                  border
                  v-for="(item, idx) in defectCategory"
                  :key="idx"
                ></el-checkbox>
              </el-checkbox-group>
              <el-button
                type="primary"
                style="width: 97%"
                @click="checkBoxChange(item)"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单号卷号弹窗 -->
    <el-dialog
      title="请先选择订单号、卷号"
      :visible.sync="opendia"
      width="500px"
      append-to-body
    >
      <div>
        <el-select
          v-model="batchnum"
          filterable
          @change="onKeyChange"
          placeholder="请选择订单号"
        >
          <el-option v-for="key in Batchs" :key="key" :value="key">{{
            key
          }}</el-option>
        </el-select>
        <el-select v-model="reelnum" filterable placeholder="请选择卷号">
          <el-option
            v-for="value in allBatchReel[batchnum]"
            :key="value"
            :value="value"
            >{{ value }}</el-option
          >
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureDia">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 右键瑕疵Map节点的详情信息 -->
    <el-drawer title="瑕疵点信息详情" :visible.sync="nodeDetail" size="36%">
      <div class="drawerDetail">
        <div class="imageDetail">
          <el-image style="width: 74%; height: auto" :src="getPic(this.url)">
          </el-image>
        </div>

        <div class="infoDetail">
          <el-form label-width="80px">
            <el-row>
              <el-col :span="12"
                ><el-form-item label="生产日期">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.date"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷编号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.defectid"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="产品卷号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.reelnum"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷类型">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.defecparamname"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="横  坐标">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.xaxis"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="纵  坐标">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.yaxis"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="缺陷宽度">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.vlength"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷高度">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.hlength"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="缺陷面积">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.area"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="相机编号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.cameraid"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- <div style="width: 96%; height: 20%; margin: 10px">
        <div>
          <span class="nodeinfo"
            >瑕疵面积(平方毫米):<span class="nodeinfodata">{{
              this.nodeInfo.area
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵类型:<span class="nodeinfodata">{{
              this.nodeInfo.defecparamname
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵置信度:<span class="nodeinfodata">{{
              this.nodeInfo.defecparamconfidene
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵检测日期:<span class="nodeinfodata">{{
              this.nodeInfo.date
            }}</span></span
          >
        </div>
        <div>
          <span class="nodeinfo"
            >瑕疵x坐标:<span class="nodeinfodata">{{
              this.nodeInfo.xaxis
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵y坐标:<span class="nodeinfodata">{{
              this.nodeInfo.yaxis
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵像素点x坐标:<span class="nodeinfodata">{{
              this.nodeInfo.xpixel
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵像素点y坐标:<span class="nodeinfodata">{{
              this.nodeInfo.ypixel
            }}</span></span
          >
        </div>
        <div>
          <span class="nodeinfo"
            >瑕疵标注框高度(毫米):<span class="nodeinfodata">{{
              this.nodeInfo.hlength
            }}</span></span
          >
          <span class="nodeinfo"
            >瑕疵标注框宽度(毫米):<span class="nodeinfodata">{{
              this.nodeInfo.vlength
            }}</span></span
          >
          <span class="nodeinfo"
            >标注框宽像素:<span class="nodeinfodata">{{
              this.nodeInfo.wpixel
            }}</span></span
          >
          <span class="nodeinfo"
            >标注框高像素:<span class="nodeinfodata">{{
              this.nodeInfo.hpixel
            }}</span></span
          >
        </div>
      </div> -->
    </el-drawer>
    <!-- 瑕疵节点hover图片 -->
    <div id="popup" class="popup" style="display: none">
      <div id="image-container">
        <img id="node-image" src="" style="width: 200px; height: 200px" />
      </div>
      <p id="node-id" style="textalign: center"></p>
    </div>
  </div>
</template>

<script>
import * as api from "./api";
import cytoscape from "cytoscape";
import moment from "moment";
export default {
  name: "dmap",
  data() {
    return {
      //条件搜索
      searchForm: {
        startTime: "",
        endTime: "",
        batchnum: "",
        reelnum: "",
        machinecode: "",
        page: 1,
        limit: 20,
      },
      activeName: "0",
      batchnum: null,
      reelnum: null,
      machineList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      opendia: false,
      nodes: [],
      edges: [],
      btnload: false,
      center: {}, //中心点
      copyNodes: [],
      //瑕疵样式
      style: {},
      defectData: [],
      options: {
        name: "preset",
        positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
        zoom: 0.75, // the zoom level to set (prob want fit = false if set)
        pan: { x: 0, y: 20 }, // the pan level to set (prob want fit = false if set)
        fit: false, // whether to fit to viewport
        padding: 30, // padding on fit
        animate: false, // whether to transition the node positions
        animationDuration: 500, // duration of animation in ms if enabled
        animationEasing: undefined, // easing of animation if enabled
        animateFilter: function (node, i) {
          return true;
        }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
        ready: undefined, // callback on layoutready
        stop: undefined, // callback on layoutstop
        transform: function (node, position) {
          return position;
        }, // transform a given node position. Useful for changing flow direction in discrete layouts
      },
      zoomSilder: 37.5, //瑕疵地图缩放
      defectCategory: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ],
      checkboxGroup1: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ], //筛选瑕疵
      mapZoom: 3,
      //瑕疵样式
      style: {},
      //地图位置大小
      extend: {
        height: null,
        width: null,
        up: null,
        down: null,
        left: null,
        right: null,
      },
      cyMap: [],
      // 所有订单号和卷号查询
      allBatchReel: [],
      // 所有订单号
      Batchs: [],
      // 瑕疵点详情
      nodeDetail: false,
      // url
      url: "",
      // 瑕疵点信息
      nodeInfo: "",
    };
  },
  filters: {
    timeFilter(val) {
      return moment(val * 1).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    this.batchnum = this.$route.params.batchnum;
    this.reelnum = this.$route.params.reelnum;
    if (this.batchnum == null || this.reelnum == null) {
      this.opendia = true;
    } else {
      this.getData();
    }
    this.allBatchReel = this.$store.state.allBatchReel;
    this.Batchs = Object.keys(this.allBatchReel);
    if (this.Batchs.length == 0) {
      api.defectallBatchReel().then((res) => {
        this.$store.dispatch("getallBatchReel", res.data.data);
        this.allBatchReel = res.data.data;
        this.Batchs = Object.keys(this.allBatchReel);
      });
    }
  },
  methods: {
    // handleClick(tab, event) {
    //   this.nodes = [];
    //   this.edges = [];
    //   console.info(this.defectData);
    //   // console.log(tab.label, event);
    //   this.defectData.forEach((item) => {
    //     if (item.machinecode == tab.label) {
    //       this.defectStyle(item.defecparamname);
    //       this.nodes.push({
    //         data: {
    //           id: item.dataId,
    //           defecparamname: item.defecparamname,
    //         },
    //         style: this.style,
    //         position: {
    //           x: parseFloat(item.xaxis),
    //           y: parseFloat(item.yaxis),
    //         },
    //       });
    //     }
    //   });
    //   this.copyNodes = this.nodes;
    //   // console.log(this.nodes);
    //   this.options.pan = { x: 0, y: 20 };
    //   this.createCytoscape(tab.label);
    //   console.log(this.nodes);
    // },
    cancel() {
      this.opendia = false;
    },
    sureDia() {
      this.getData();
      this.opendia = false;
    },
    getData() {
      let param = {
        batchnum: this.batchnum,
        reelnum: this.reelnum,
        startTime: "",
        endTime: "",
        machinecode: "",
      };
      this.$message({
        message: "加载数据中，请稍等",
        type: "success",
      });
      this.machineList = [];
      this.cyMap = [];
      api.defectMapFilter(param).then((res) => {
        this.defectData = res.data.data;
        res.data.data.forEach((element) => {
          if (!this.machineList.includes(element.machinecode)) {
            this.machineList.push(element.machinecode);
            this.cyMap.push(element.machinecode);
          }
        });
        this.nodes = [];
        this.edges = [];
        res.data.data.forEach((item) => {
          if (item.machinecode == this.machineList[0]) {
            this.defectStyle(item.defecparamname);
            this.nodes.push({
              data: {
                id: item.dataId,
                defecparamname: item.defecparamname,
                imagename: item.imagename,
                imagepath: item.imagepath,
                property: item,
              },
              style: this.style,
              position: {
                x: parseFloat(item.xaxis),
                y: parseFloat(item.yaxis),
              },
            });
          }
        });
        this.copyNodes = this.nodes;
        // console.log(this.nodes);
        this.options.pan = { x: 0, y: 20 };
        this.createCytoscape(this.machineList[0]);
      });
    },
    defectStyle(str) {
      this.style = {};
      if (str.indexOf("烂胶") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("气泡") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布毛") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("凹痕") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "star",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("色线") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("褶皱") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("停机印") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("驳口") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("针板孔") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布接头") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else {
        this.style = {};
        console.log("str", str);
      }
    },
    //瑕疵地图缩放
    zoomSilderChange() {
      if (this.zoomSilder == 0) {
        this.zoomSilder += 1;
      }
      this.options.zoom = this.zoomSilder / 50;
      this.createCytoscape();
    },
    //瑕疵地图移动
    mapMove(row) {
      if (row == 0) {
        this.options.pan.y -= 100;
      } else {
        this.options.pan.y += 100;
      }
      this.createCytoscape(name);
    },
    checkBoxChange(row) {
      console.log(this.checkboxGroup1);
      let arr = [];
      this.copyNodes.forEach((item) => {
        if (
          this.checkboxGroup1.some((ele) =>
            item.data.defecparamname.includes(ele)
          )
        ) {
          arr.push(item);
        }
      });
      this.nodes = arr;
      this.createCytoscape(row);
    },
    loadMap() {
      this.nodes = [];
      this.edges = [];
      // console.log(tab.label, event);
      this.defectData.forEach((item) => {
        if (
          item.date >= this.searchForm.startTime &&
          item.date <= this.searchForm.end
        ) {
          this.defectStyle(item.defecparamname);
          this.nodes.push({
            data: {
              id: item.dataId,
              defecparamname: item.defecparamname,
            },
            style: this.style,
            position: {
              x: parseFloat(item.xaxis),
              y: parseFloat(item.yaxis),
            },
          });
        }
      });
      this.createCytoscape();
    },
    createCytoscape() {
      let this_ = this;
      cytoscape.warnings(false);
      const cy = cytoscape({
        container: document.getElementById("cyMap"),
        autolock: true,
        zoomingEnabled: true,
        panningEnabled: true,
        userPanningEnabled: true,
        boxSelectionEnabled: true,
        userZoomingEnabled: false, //滚轮缩放
        wheelSensitivity: 0.1,
        autounselectify: true,
        autoungrabify: false,
        minZoom: 0.01,
        style: [
          {
            selector: "node",
            style: {
              content: "data(defecparamname)",
              "text-opacity": 0.5,
              height: 20,
              width: 20,
              shape: "round-rectangle",
              "pie-size": "100%",
              "text-valign": "center",
              "text-halign": "center",

              "pie-1-background-color": "#E8747C",
              "pie-1-background-size": "mapData(occupy, 0, 10, 0, 100)",
            },
          },
          {
            selector: ":parent",
            css: {
              "text-valign": "top",
              "text-halign": "center",
            },
          },
        ],
        elements: {
          //节点数据
          nodes: this.nodes,
          edges: this.edges,
        },
        layout: this.options,
      });
      //左键单击节点
      cy.on("tap", "node", (e) => {
        console.log(e.target._private.data);
        const nodePosition = e.target._private.position;
        const test = cy.extent();
        const imgName = e.target._private.data.imagename;
        const imgPath = e.target._private.data.imagepath;
        this.url = imgPath + "/" + imgName;
        this.nodeInfo = e.target._private.data.property;
        console.log("当前中心点坐标:", test);
        console.log("Center Node Position:", nodePosition);
        this.nodeDetail = true;
        // 时间戳->日期
        this.nodeInfo.date = moment(this.nodeInfo.date * 1).format("YYYY-MM-DD HH:mm:ss");
        // this.nodeInfo.date = new Date(
        //   this.nodeInfo.date * 1000
        // ).toLocaleString();
        // 设置视口中心点为选定节点的位置
        // cy.panBy({
        //   x: cy.width() / 2 - nodePosition.x,
        //   y: cy.height() / 2 - nodePosition.y,
        // });
      });
      //拖动节点
      cy.on("mouseover", "node", function (event) {
        var node = event.target;
        var x = node.renderedPosition().x;
        var y = node.renderedPosition().y;

        var popup = document.getElementById("popup");
        var imageContainer = document.getElementById("image-container");
        var nodeImage = document.getElementById("node-image");
        var nodeId = document.getElementById("node-id");

        nodeId.textContent = "瑕疵类型: " + node._private.data.defecparamname;
        const imgName = event.target._private.data.imagename;
        const imgPath = event.target._private.data.imagepath;
        this.url = this_.getPic(imgPath + "/" + imgName);
        // console.info(this.url)
        nodeImage.src = this.url; // 设置要显示的图片的URL
        // console.log(nodeImage)
        imageContainer.style.display = "block";

        popup.style.left = x + 90 + "px";
        popup.style.top = y + 10 + "px";
        popup.style.display = "block";
      });

      cy.on("mouseout", "node", function (event) {
        var popup = document.getElementById("popup");
        var imageContainer = document.getElementById("image-container");

        imageContainer.style.display = "none";
        popup.style.display = "none";
      });
      cy.on("pan", (event) => {
        const test = cy.extent();
        // const currentCenter = cy.pan(); // 获取当前中心点坐标
        // this.options.pan.y = currentCenter.y;
        // console.log("当前中心点坐标:", currentCenter);
        // 获取选定节点的位置
        this.extend.height = (cy.extent().h / 1000).toFixed(2);
        this.extend.width = (cy.extent().w / 1000).toFixed(2);
        this.extend.up = (cy.extent().y1 / 1000).toFixed(2);
        this.extend.down = (cy.extent().y2 / 1000).toFixed(2);
        this.extend.left = (cy.extent().x1 / 1000).toFixed(2);
        this.extend.right = (cy.extent().x2 / 1000).toFixed(2);
      });
      this.extend.height = (cy.extent().h / 1000).toFixed(2);
      this.extend.width = (cy.extent().w / 1000).toFixed(2);
      this.extend.up = (cy.extent().y1 / 1000).toFixed(2);
      this.extend.down = (cy.extent().y2 / 1000).toFixed(2);
      this.extend.left = (cy.extent().x1 / 1000).toFixed(2);
      this.extend.right = (cy.extent().x2 / 1000).toFixed(2);
    },
    onKeyChange() {
      this.selectedReel = "";
    },
    // 获取瑕疵点图片
    getPic(str) {
      return api.defectImageUrl(str);
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  //padding: 20px;
  min-height: 250px;
  padding: 10px 10px 0px 5px;
  margin-right: auto;
  margin-left: auto;
}

.box-form-top {
  height: 86vh;
  // text-align: center;
  line-height: 100%;
  border-top: 0;
  margin-bottom: 5px;
  width: 99%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: flex;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.dialogWin {
  // padding-left: 10px;
  padding-right: 10px;
  display: flex;
  height: 85vh;
  width: 100%;

  .modelArea {
    position: relative;
    border-top: 0;
    margin-bottom: 12px;
    // width: 1220px;
    width: 74%;
    // height: 94%;
    background: #fff;
    border-radius: 0;
    padding: 10px;
    border: 1px solid #dce3e6;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    margin-left: 20px;

    .modelArea_up {
      display: flex;
      width: 100%;
      height: 95%;

      .cy {
        width: 93.5%;
        height: 100%;
        background-color: #b7ffff;
      }

      .cy_Area {
        position: relative;
        margin-left: 8px;
        width: 5%;
        height: 100%;
        // border: 1px solid #dce3e6;
      }
    }

    .modelArea_down {
      display: flex;
      margin-top: 4px;
      height: 4%;
      width: 94.9%;
      // border: 1px solid #dce3e6;
    }
  }

  .rightArea {
    display: block;
    height: 100%;
    width: 24%;

    .rightArea_Up {
      position: relative;
      border-top: 0;
      margin-bottom: 12px;
      width: 100%;
      height: 30%;
      background: #fff;
      border-radius: 0;
      padding: 10px;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      margin-left: 10px;
    }

    .rightArea_Down {
      position: relative;
      border-top: 0;
      margin-bottom: 12px;
      width: 100%;
      height: 67.3%;
      background: #fff;
      border-radius: 0;
      padding: 10px;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      margin-left: 10px;

      .checkBoxStyle {
        margin-bottom: 10px;
        margin-left: 10px;
        width: 38%;
      }
    }
  }

  .dialog-footer {
    width: 100%;
  }
}

.popup {
  position: absolute;
  z-index: 9999;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  .img {
    width: 200px;
    height: 200px;
  }
}
#image-container {
  display: none;
}
.nodeinfodata {
  font-size: large;
  color: red;
  margin: 10px;
}
.nodeinfo {
  font-size: small;

  margin: 5px;
}

.drawerDetail {
  padding: 10px;
  width: 100%;
  height: 100%;
  .imageDetail {
    // border: 1px solid #ccc;
    // align-items: center;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    padding-top: 0px;
    width: 98%;
    height: auto;
    margin: 10px;
  }
  .infoDetail {
    width: 98%;
    height: 36%;
  }
}
</style>
